<template>
  <div class="app-container">
    <el-form size="mini" :inline="true" :model="queryParams" @keyup.enter.native="loadData()">
      <el-form-item label="订单号">
        <el-input v-model="queryParams.orderSn" placeholder="请输入订单号" clearable></el-input>
      </el-form-item>
      <el-form-item>
        <el-button icon="el-icon-search" type="primary" size="mini" @click="loadData()">查询</el-button>
      </el-form-item>
    </el-form>

    <el-table
      :data="dataSource"
      border
      v-loading="loading"
      @selection-change="selectionChangeHandle"
      style="width: 100%;"
    >
      <el-table-column type="selection" header-align="center" align="center" width="50">
      </el-table-column>
      <el-table-column prop="orderSn" header-align="center" align="center" label="订单编号">
      </el-table-column>
      <el-table-column prop="memberUsername" header-align="center" align="center" label="会员用户名">
      </el-table-column>
      <el-table-column prop="refundAmount" header-align="center" align="center" label="退款金额">
      </el-table-column>
      <el-table-column prop="status" header-align="center" align="center" label="状态">
      </el-table-column>
      <el-table-column prop="handleTime" header-align="center" align="center" label="处理时间">
      </el-table-column>
      <el-table-column prop="skuName" header-align="center" align="center" label="商品名称">
      </el-table-column>
      <el-table-column prop="skuCount" header-align="center" align="center" label="退货数量">
      </el-table-column>
      <el-table-column prop="skuPrice" header-align="center" align="center" label="商品单价">
      </el-table-column>
      <el-table-column prop="reason" header-align="center" align="center" label="退款原因">
      </el-table-column>
      <el-table-column prop="createTime" header-align="center" align="center" label="申请时间">
      </el-table-column>
      <el-table-column
        fixed="right"
        header-align="center"
        align="center"
        width="150"
        label="操作"
      >
        <template slot-scope="scope">
          <el-button type="text" size="small" @click="addOrUpdateHandle(scope.row.id)">修改</el-button>
          <el-button type="text" size="small" @click="deleteHandle(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.pageNo"
      :limit.sync="queryParams.pageSize"
      @pagination="loadData"
    />
  </div>
</template>

<script>
import { orderReturnList } from '@/api/order/orderReturn'

export default {
  data() {
    return {
      queryParams: {
        pageNo: 1,
        pageSize: 10
      },
      dataSource: [],
      total: 0,
      loading: false,
      selections: [],
    }
  },
  created() {
    this.loadData()
  },
  methods: {
    loadData() {
      this.loading = true
      orderReturnList(this.queryParams).then(res => {
        if (res.success) {
          this.dataSource = res.data.records
          this.total = res.data.total
        }
        this.loading = false
      })
    },
    // 多选
    selectionChangeHandle(val) {
      this.selections = val
    },
  }
}
</script>
